Skip to main content

Utviklingsrammeverk

Generelt​

Tjenestene fra Geodata Online er spesielt tilrettelagt for enkel bruk i ArcGIS-applikasjoner og biblioteker/rammeverk. Flere av tjenestene har støtte for ulike OGC-standarder, som WMS og WMTS, som gjør det mulig å bruke de i andre GIS-applikasjoner.

For webutvikling anbefaler vi ArcGIS Maps SDK for JavaScript. Det finnes også egne rammeverk for iOS, Android, Python osv. Mer informasjon om dette finner du her.

Bakgrunnskartene på vector tiles-format i kartprojeksjonen Web Mercator er tilrettelagt så de fungerer i biblioteker som Mapbox GL JS, Leaflet og OpenLayers.

Alle tjenestene har veldefinerte REST/JSON-grensesnitt som gjør det mulig å integrere innhold og tjenester i alle slags systemer og løsninger.

caution

Bruk av tjenester fra Geodata Online krever en avtale med Geodata AS.

ArcGIS Maps SDK for JavaScript​

<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Geodata Online-bakgrunnskart</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.29/"></script>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/VectorTileLayer",
            "esri/layers/TileLayer"
        ], (Map, MapView, VectorTileLayer, TileLayer) => {

            const map = new Map();

            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: { x: 260000, y: 6650000, spatialReference: { wkid: 25833 } },
                zoom: 8
            });

            map.add(new VectorTileLayer({
                url: "https://vector.services.geodataonline.no/arcgis/rest/services/GeocacheVector/GeocacheNordenBasisTerreng/VectorTileServer"
            }));

            /* Flyfoto
            map.add(new TileLayer({
                url: "https://services.geodataonline.no/arcgis/rest/services/Geocache_UTM33_EUREF89/GeocacheBilder/MapServer"
            }));
            */
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

Bakgrunnskart i andre biblioteker​

Vector tiles-tjenestene i Web Mercator fungerer i ulike biblioteker. Les mer om de ulike bakgrunnskartene her. I tillegg til url'ene som er oppgitt må man i de fleste tilfeller legge til "/resources/styles/root.json" for å peke direkte på style-dokumentet.

MapLibre GL JS​

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Geodata Online-bakgrunnskart</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.js'></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        html,
        body,
        #map {
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        const map = new maplibregl.Map({
            container: 'map',
            style: "https://vector.services.geodataonline.no/arcgis/rest/services/GeocacheVector/GeocacheNordenBasis_WM/VectorTileServer/resources/styles/root.json",
            zoom: 7,
            center: [8, 60]
        });

        /* Bilder
        const map = new maplibregl.Map({
            container: 'map', // container id
            style: {
                'version': 8,
                'sources': {
                    'raster-tiles': {
                        'type': 'raster',
                        'tiles': [
                            'https://services.geodataonline.no/arcgis/rest/services/Geocache_WMAS_WGS84/GeocacheBilder/MapServer/tile/{z}/{y}/{x}'
                        ],
                        'tileSize': 256,
                        'attribution': 'Geodata AS',
                        'maxzoom': 19
                    }
                },
                'layers': [
                    {
                        'id': 'simple-tiles',
                        'type': 'raster',
                        'source': 'raster-tiles',
                        'minzoom': 0
                    }
                ]
            },
            zoom: 8,
            center: [10, 60],
            maxZoom: 19
        });
        */

        let nav = new maplibregl.NavigationControl();
        map.addControl(nav, 'top-left');
    </script>
</body>

</html>

Leaflet​

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Geodata Online-bakgrunnskart</title>
    <style>
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <!-- Load Leaflet from CDN -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

    <!-- Esri Leaflet and Esri Leaflet Vector -->
    <script src="https://unpkg.com/esri-leaflet/dist/esri-leaflet.js"></script>
    <script src="https://unpkg.com/esri-leaflet-vector@3/dist/esri-leaflet-vector.js"></script>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = L.map("map").setView([60, 10], 8);
        L.esri.Vector.vectorTileLayer(
            "https://vector.services.geodataonline.no/arcgis/rest/services/GeocacheVector/GeocacheBasis_WM/VectorTileServer",
            { 
                style: function (style) {
                    // Overstyre maxzoom i style'en for å få overzoom til å fungere i Leaflet
                    style.sources.esri.maxzoom = 15;
                    return style;
                }
            }
        ).addTo(map);
    </script>
</body>

</html>

OpenLayers​

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Geodata Online-bakgrunnskart</title>
    <style>
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css" />
    <script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@9.2.0/dist/olms.js"></script>
</head>

<body>
    <div id="map"></div>
    <script>
        ol.proj.useGeographic();
        
        const map = new ol.Map({
            target: 'map',
            view: new ol.View({
                center: [10, 60],
                zoom: 8,
            }),
        });

        styleURL = "https://vector.services.geodataonline.no/arcgis/rest/services/GeocacheVector/GeocacheBasis_WM/VectorTileServer/resources/styles/root.json";
        olms.apply(map, styleURL);
    </script>
</body>

</html>